<template>
	<div id="home">
		<el-container>
			<el-aside width="null">
				<nav-menu @childFn="parentFn" v-bind:isCollapse='isCollapse'></nav-menu>
			</el-aside>
			<el-container>
				<el-header>
					<!-- <p >{{message}}</p> -->
					<div class="head">
						<i :class="isCollapse==true?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse=!isCollapse"></i>
						<!-- <i class="el-icon-s-fold"></i> -->
						<div class="title" >{{head[$route.path] }}</div>
					</div>
					<div class="time">{{ nowDate }}</div>
					<div class="admin">
						<!-- 				<el-dropdown>
						  <el-button type="primary">
						    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
						  </el-button>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>注销</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown> -->

						<el-dropdown @command="memberInfo">
							<span class="el-dropdown-link">
								{{admin}}
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="loginout">注销</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<!-- <el-button type="primary" @click="loginOutVisible = true">注销</el-button> -->
				</el-header>
				<el-main>
				
					<!-- 子路由 -->
					<!-- 组件视图容器展示  在home页面里显示东西-->
					<!-- <router-view></router-view> -->
					<router-view />
				</el-main>
			</el-container>
		</el-container>
		<!-- 注销 -->
		<!-- <el-dialog title="提示" :visible.sync="loginOutVisible" width="20%">
			<span>确定注销并退出系统吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="loginOutVisible = false" size="mini">取 消</el-button>
				<el-button type="primary" @click="loginOut" size="mini">确 定</el-button>
			</span>
		</el-dialog> -->
		<!-- <el-container>
			<el-header>Header</el-header>
			<el-container>
				<el-aside width="200px">
					<nav-menu></nav-menu>
				</el-aside>
				<el-main>Main</el-main>
			</el-container>
		</el-container> -->
	</div>
</template>

<script>
	import navMenu from "@/components/navMenu"

	export default {
		name: 'home',

		components: {
			navMenu
		},
		data() {
			return {
				
				isCollapse: true,
				admin:'',
				activeIndex: '1',
				loginOutVisible: false,
				nowDate: "", // 当前日期
				message: '',
				head: {
					'/member': '管理员管理',
					'/classify': '分类管理',
					'/product': '产品管理',
					'/order': '订单管理',
					'/data': '数据管理',
				}
			}
		},
		created() {
			// console.log(this.$route)
			this.getAdmin();
			
		},
		mounted() {
			this.currentTime();
		},
		methods: {
			getAdmin(){
				// JSON.parse(sessionStorage.getItem("member")).memberName 从session 中取值
				this.admin=JSON.parse(sessionStorage.getItem("member")).memberName				
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			parentFn(payload) {
				this.message = payload;
			},
			memberInfo(command) {
				console.log(132)
				//清除sessionStorage
				// window.sessionStorage.clear();
				window.sessionStorage.removeItem("member");
				// 路由跳转
				this.$router.push({
					path: "/"
				})
			},
			currentTime() {
				setInterval(this.formatDate, 500);
			},
			formatDate() {
				let date = new Date();
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); // 日
				let week = date.getDay(); // 星期
				let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				let hour = date.getHours(); // 时
				hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
				this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
			}
		},
		// 销毁定时器
		beforeDestroy() {
			if (this.formatDate) {
				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
			}
		}
	}
</script>

<style scoped="scoped">
	#home {
		width: 100%;
		height: 100vh;
	}

	.el-container {
		width: 100%;
		height: 100vh;
	}

	.el-aside {
		background-color: #D3DCE6;
		background-color: rgb(48, 65, 86);
		color: #333;
	}

	.el-main {
		/* background-color: #E9EEF3; */
		background-color: white;
		color: #333;
		box-shadow: 0 -5px 10px rgb(0 21 41 / 8%) !important;
		/* box-shadow: 0 -5px 10px #ddd !important; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}


	/* header */
	.el-header {
		background-color: white;
		/* color: #000000; */
		color: #606266;
		/* box-shadow: 0 1px 4px rgb(0 21 41 / 8%) !important; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	/* head */
	.head{
	
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.head i{
		font-size: 24px;
	}
	.title {
		background-color: #f8f8f9;
		width: 150px;
		height: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 10px
	}

	/* time */
	.time {
		background-color: #f8f8f9;
		width: 220px;
		height: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}
	.admin{
		height: 50%;
	}
	.admin .el-dropdown{
		display: block;
		background-color: #f8f8f9;
		width: 100px;
		height: 100%;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}
</style>
<style>
	/* 注销弹窗 */
	/* 	.el-dialog{
		border: 1px solid red;
	}
	.el-dialog__body{
		padding: 10px 15px ;
		box-sizing: border-box;
	} */
</style>
